import React, { useState, useEffect } from 'react';
import { Layout, Row, Col, message, Tabs, Button, Drawer, Table, Tooltip } from 'antd';
import services from '../../../../services/api';
import { IconFont } from '../../../../components/IconFont';
import PolicyAdd from '../add';
import FieldAdd from '../../../Variable/Field/add';
import CodeLabel from '../../../../components/CodeLabel';
import './step2.less';

const { Sider, Content } = Layout;
function Step2(props) {
  const [currentData, setCurrentData] = useState({});
  const [isStrategy, setIsStrategy] = useState(true);
  const [strategies, setStrategies] = useState([]);
  const [fields, setFields] = useState([]);
  const [visible, setVisible] = useState(false);
  const [errors, setErrors] = useState([]);
  useEffect(() => {
    services.policy.importConfirm({ file_id: props.file_id }).then((res) => {
      if (res.code === 0) {
        setStrategies(res.data.strategies);
        setFields(res.data.fields);
        if (res.data.strategies.length > 0) {
          showStrategy(res.data.strategies[0]);
          const errors = res.data.strategies.filter((it) => {
            return it.code !== 0;
          });

          if (errors.length > 0) {
            setErrors(errors);
            setTimeout(() => {
              setVisible(true);
            }, 1000);
          }
        }
      } else {
        message.error(res.msg);
      }
    });
  }, []);

  function showStrategy(item) {
    setIsStrategy(true);
    setCurrentData(item);
  }

  function showField(item) {
    setIsStrategy(false);
    setCurrentData(item);
  }

  function handleSubmit() {
    services.policy.import({ file_id: props.file_id }).then((res) => {
      if (res.code === 0) {
        props.goto(res.data);
      } else {
        message.error(res.msg);
      }
    });
  }
  const columns = [
    {
      key: 'name',
      title: '名称',
      dataIndex: 'data',
      width: 150,
      ellipsis: true,
      render: (text, record) => {
        return <Tooltip title={record.data.name}>{record.data.name}</Tooltip>;
      },
    },
    {
      key: 'type',
      title: '类型',
      dataIndex: 'data',
      ellipsis: true,
      render: (text, record) => {
        return <CodeLabel code='strategy_type' value={record.data.strategy_type} />;
      },
    },
    {
      key: 'msg',
      title: '异常信息',
      dataIndex: 'msg',
      ellipsis: true,
      render: (text, record) => {
        return (
          <Tooltip title={text} placement='topLeft'>
            {text}
          </Tooltip>
        );
      },
    },
  ];

  return (
    <>
      <Layout id='importArea' className='import-area bg-light'>
        <Sider className='import-area-side bg-light'>
          <div className='import-list'>
            <Tabs defaultActiveKey='1'>
              <Tabs.TabPane tab='策略' key='1'>
                {strategies.map((it) => {
                  return (
                    <Row
                      type='flex'
                      gutter='10'
                      onClick={() => showStrategy(it)}
                      className={
                        currentData.data && currentData.data.strategy_id === it.data.strategy_id
                          ? 'import-item active'
                          : 'import-item'
                      }
                    >
                      <Col className='import-item-icon'>
                        <IconFont
                          type={it.code === 0 ? 'iconsuccess-' : 'iconm-error-'}
                          style={{ fontSize: it.code === 0 ? '16px' : '14px' }}
                        />
                      </Col>
                      <Col className='import-name'>
                        <Tooltip title={it.data.name} placement='topLeft'>
                          {it.data.name}
                        </Tooltip>
                      </Col>
                    </Row>
                  );
                })}
              </Tabs.TabPane>
              <Tabs.TabPane tab='字段' key='2'>
                {fields.map((it) => {
                  return (
                    <Row
                      type='flex'
                      gutter='10'
                      onClick={() => showField(it)}
                      className={currentData.field_id === it.field_id ? 'import-item active' : 'import-item'}
                    >
                      <Col className='import-item-icon'>
                        <IconFont type={'iconsuccess-'} style={{ fontSize: '16px' }} />
                      </Col>
                      <Col className='import-name'>
                        <Tooltip title={it.field_name} placement='topLeft'>
                          {it.field_name}
                        </Tooltip>
                      </Col>
                    </Row>
                  );
                })}
              </Tabs.TabPane>
            </Tabs>
          </div>
          <div className='import-tips'>
            <Row type='flex' gutter='10' className='import-item'>
              <Col>
                <IconFont type='iconsuccess-' style={{ fontSize: '16px' }} />
              </Col>
              <Col className='import-name'>有效策略可以导入</Col>
            </Row>
            <Row type='flex' gutter='10' className='import-item'>
              <Col>
                <IconFont type='iconm-error-' style={{ fontSize: '14px' }} />
              </Col>
              <Col className='import-name'>无效策略可以导入</Col>
            </Row>
          </div>
        </Sider>
        <Content style={{ padding: '20px' }} className='stretegy-content'>
          {isStrategy ? (
            <div>
              <PolicyAdd
                actionType='detail'
                value={currentData.data}
                isImport={true}
                key={currentData.data && currentData.data.strategy_id}
              />
            </div>
          ) : (
            <FieldAdd value={currentData} key={currentData.field_id} actionType='detail' isImport={true} />
          )}
        </Content>
        <Drawer
          title='异常信息'
          placement='right'
          closable={true}
          onClose={() => setVisible(false)}
          visible={visible}
          getContainer={false}
          style={{ position: 'absolute' }}
          width={400}
        >
          <Table dataSource={errors} columns={columns} className='fixed' />
        </Drawer>
      </Layout>
      <div className='strategy-operater-ft'>
        <Row type='flex' justify='center'>
          <Col span={12} style={{ textAlign: 'center' }}>
            <Button onClick={() => props.goPrev && props.goPrev()}>上一步</Button>
            <Button
              type='primary'
              style={{ marginLeft: '10px' }}
              onClick={() => handleSubmit()}
              disabled={strategies.length === errors.length}
            >
              导入
            </Button>
          </Col>
        </Row>
        <p>
          请注意：为了保证线上业务安全，文件中策略里用到的名单、模型、策略输出值，如风控系统中未存在，此策略则无法导入
        </p>
      </div>
    </>
  );
}

export default Step2;
